<template>
  <!-- 修改订单地址信息 -->
  <el-dialog title="修改订单地址" v-model="editVisible" width="30%" draggable>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="150px" v-loading="loading">
      <el-row :gutter="10">
        <el-col :span="20">
          <el-form-item label="下单人姓名：" prop="name">
            <el-input v-model.trim="form.name" placeholder="下单人姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="下单人手机号：" prop="mobile">
            <el-input v-model.trim="form.mobile" placeholder="下单人手机号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20" v-if="showProvincesCitiesCounties">
          <el-form-item label="省：" prop="province">
            <el-select v-model.trim="form.province" placeholder="请选择省" class="" @change="handleChangeProvince">
              <el-option v-for="item in provinceList" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="20" v-if="showProvincesCitiesCounties">
          <el-form-item label="市：" prop="city">
            <el-select v-model.trim="form.city" placeholder="请选择市" class="" @change="handleChangeCity">
              <el-option v-for="item in cityList" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="20" v-if="showProvincesCitiesCounties">
          <el-form-item label="县：" prop="district">
            <el-select v-model.trim="form.district" placeholder="请选择县" class="">
              <el-option v-for="item in districtList" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="详细地址：" prop="address">
            <el-input v-model.trim="form.address" type="textarea" placeholder="详细地址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="disabledbtn" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { useState } from "@/hooks/useState.ts";
import type { HasId } from "@/types/common";
import type { IRegion, ISearchRegion } from "@/types/redPacketMallManage/region";
import type { IRentChangeOrderAddress, IRentMachineOrderDetailVO } from "@/types/rentMachineManage/rentMachineOrderInfo";
import { getRegionInfo } from "@/utils/api/region";
import { getRentMobileOrderByIdInfo, putRentMobileOrderUpdateAddressInfo } from "@/utils/api/rentMobileOrder";
const { disabledbtn, loading, toggleState } = useState();

const platform = ref<string>("");

const emit = defineEmits<{
  handleSuccess: [];
}>();
const editVisible = defineModel<boolean>("editVisible", { required: true });
const form = defineModel<IRentChangeOrderAddress>("form", { required: true });
const formRef = useTemplateRef("formRef");
const rules = reactive({
  name: [{ required: true, message: "请填写下单人姓名", trigger: "blur" }],
  address: [{ required: true, message: "请填写详细地址", trigger: "blur" }]
});
/* 省 */
const provinceList = ref<Array<IRegion>>([]);
/* 市 */
const cityList = ref<Array<IRegion>>([]);
/* 区 */
const districtList = ref<Array<IRegion>>([]);

watch(
  () => editVisible.value,
  newValue => {
    if (newValue) {
      /* 初始化数据 */
      handleGetRentMobileOrderById();
    } else {
      form.value.id = 0;
      form.value.mobile = "";
      form.value.name = "";
      form.value.province = "";
      form.value.city = "";
      form.value.district = "";
      form.value.address = "";
      cityList.value = [];
      districtList.value = [];
      formRef.value?.resetFields();
      formRef.value?.clearValidate();
    }
  }
);
/* 是否显示省市区 */
const showProvincesCitiesCounties = computed(() => {
  if (["bytePlatform"].includes(platform.value)) return false;
  return true;
});

/* 获取订单详情信息 */
function handleGetRentMobileOrderById() {
  toggleState(true);
  getRentMobileOrderByIdInfo<IRentMachineOrderDetailVO, HasId>({ id: form.value.id })
    .then(res => {
      form.value.name = res.result.name;
      form.value.province = res.result.province;
      form.value.city = res.result.city;
      form.value.district = res.result.district;
      form.value.address = res.result.address;
      platform.value = res.result.platform;
      if (form.value.province != 0) {
        handleGetRegionInfo(+form.value.province, cityList);
      }
      if (form.value.city != 0) {
        handleGetRegionInfo(+form.value.city, districtList);
      }
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

/* 选择省 */
function handleChangeProvince() {
  cityList.value = [];
  districtList.value = [];
  form.value.city = "";
  form.value.district = "";
  handleGetRegionInfo(+form.value.province, cityList);
}
/* 选择市 */
function handleChangeCity() {
  districtList.value = [];
  form.value.district = "";
  handleGetRegionInfo(+form.value.city, districtList);
}

/* 获取省市县信息 */
function handleGetRegionInfo(parent_id: number, list: Ref<IRegion[]>) {
  getRegionInfo<IRegion, ISearchRegion>({ parent_id })
    .then(res => {
      list.value = ([] as IRegion[]).concat(res.result);
    })
    .catch(() => {});
}
/* 数据校验 */
function submitForm() {
  if (!formRef.value) return;
  formRef.value.validate(valid => {
    if (!valid) {
      ElMessage.warning("请填写必填字段");
      return;
    }
    submitFormInfo();
  });
}
/* 保存或编辑信息 */
function submitFormInfo() {
  toggleState(true);
  putRentMobileOrderUpdateAddressInfo(form.value)
    .then(res => {
      ElMessage.success(res.msg);
      emit("handleSuccess");
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

handleGetRegionInfo(0, provinceList);
</script>

<style lang="scss" scoped></style>
